// pages/Domains/DomainConsole.tsx
import React, { useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Monitor, Terminal, Settings, ArrowLeft } from 'lucide-react';
import { useApp } from '../../App';
import VNCConsole from '../../components/Console/VNCConsole';
import SPICEConsole from '../../components/Console/SPICEConsole';
import SerialConsole from '../../components/Console/SerialConsole';

type ConsoleType = 'vnc' | 'spice' | 'serial';

const DomainConsole: React.FC = () => {
  const { domainName, consoleType } = useParams<{ domainName: string; consoleType: ConsoleType }>();
  const navigate = useNavigate();
  const { currentConnection } = useApp();
  const [selectedConsole, setSelectedConsole] = useState<ConsoleType>(consoleType || 'vnc');

  if (!currentConnection || !domainName) {
    return (
      <div className="text-center py-12">
        <p className="text-lg text-gray-400 mb-4">No connection or domain selected</p>
        <button
          onClick={() => navigate('/domains')}
          className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors"
        >
          Go to Domains
        </button>
      </div>
    );
  }

  const consoleOptions = [
    { id: 'vnc' as ConsoleType, label: 'VNC', icon: Monitor, description: 'Virtual Network Computing' },
    { id: 'spice' as ConsoleType, label: 'SPICE', icon: Settings, description: 'Simple Protocol for Independent Computing Environments' },
    { id: 'serial' as ConsoleType, label: 'Serial', icon: Terminal, description: 'Serial Console Access' }
  ];

  const renderConsole = () => {
    const props = {
      connection: currentConnection,
      domainName: domainName,
      className: 'w-full h-full'
    };

    switch (selectedConsole) {
      case 'vnc':
        return <VNCConsole {...props} />;
      case 'spice':
        return <SPICEConsole {...props} />;
      case 'serial':
        return <SerialConsole {...props} />;
      default:
        return <VNCConsole {...props} />;
    }
  };

  return (
    <div className="h-full flex flex-col">
      {/* Header */}
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-4">
          <button
            onClick={() => navigate(`/domains/${domainName}`)}
            className="p-2 rounded-lg hover:bg-gray-800 transition-colors"
          >
            <ArrowLeft size={20} />
          </button>
          <div>
            <h2 className="text-xl font-bold">{domainName} Console</h2>
            <p className="text-sm text-gray-500">Connection: {currentConnection}</p>
          </div>
        </div>

        {/* Console Type Selector */}
        <div className="flex gap-2">
          {consoleOptions.map((option) => {
            const Icon = option.icon;
            return (
              <button
                key={option.id}
                onClick={() => setSelectedConsole(option.id)}
                className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors ${
                  selectedConsole === option.id
                    ? 'bg-purple-600 text-white'
                    : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
                }`}
              >
                <Icon size={16} />
                <span className="text-sm font-medium">{option.label}</span>
              </button>
            );
          })}
        </div>
      </div>

      {/* Console Description */}
      <div className="mb-4 p-3 bg-gray-800 rounded-lg">
        <p className="text-sm text-gray-300">
          {consoleOptions.find(opt => opt.id === selectedConsole)?.description}
        </p>
      </div>

      {/* Console Display */}
      <div className="flex-1 min-h-0">
        {renderConsole()}
      </div>

      {/* Console Controls */}
      <div className="mt-4 flex items-center justify-between">
        <div className="flex items-center gap-2 text-sm text-gray-500">
          <span>Console Type: <span className="font-mono text-purple-400">{selectedConsole.toUpperCase()}</span></span>
          <span>"</span>
          <span>Domain: <span className="font-mono text-purple-400">{domainName}</span></span>
        </div>

        <div className="flex items-center gap-2">
          <button className="px-3 py-1 text-sm bg-gray-700 hover:bg-gray-600 text-white rounded transition-colors">
            Send Ctrl+Alt+Del
          </button>
          <button className="px-3 py-1 text-sm bg-gray-700 hover:bg-gray-600 text-white rounded transition-colors">
            Full Screen
          </button>
          <button className="px-3 py-1 text-sm bg-red-600 hover:bg-red-700 text-white rounded transition-colors">
            Disconnect
          </button>
        </div>
      </div>
    </div>
  );
};

export default DomainConsole;